import style from "../assets/css/home.module.css";
import Table from "./table";
import Top from "./top";

import { TabBar, Space, Swiper, SearchBar } from "antd-mobile/2x";
import { useState, useEffect } from "react";
import axios from "axios";
import { RightOutline } from "antd-mobile-icons";
import { useHistory } from "react-router-dom";

const Home = () => {
  // 得到history对象
  const history = useHistory();

  const colors = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];

  const [list, setList] = useState([]);
  const [hotApp, setHotApp] = useState([]);
  const [hotGame, setHotGame] = useState([]);
  const [apply, setApply] = useState([]);

  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div className={style.content} style={{ background: color }}>
        {index + 1}
      </div>
    </Swiper.Item>
  ));

  // 获取list
  useEffect(async () => {
    const _list = await axios.post("http://8.136.85.238:3001/api/getAlllist");
    // console.log(_list.data.data);
    setList(_list.data.data.slice(0, 4));
  }, []);

  // 获取hotApp
  useEffect(async () => {
    const _hotApp = await axios.post(
      "http://8.136.85.238:3001/api/getAllhotApp"
    );
    // console.log(_hotApp.data.data);
    setHotApp(_hotApp.data.data);
  }, []);

  // 获取hotGame
  useEffect(async () => {
    const _hotGame = await axios.post(
      "http://8.136.85.238:3001/api/getAllhotGame"
    );
    // console.log(_hotGame.data.data);
    setHotGame(_hotGame.data.data);
  }, []);

  // 获取Apply
  useEffect(async () => {
    const _hotApply = await axios.post(
      "http://8.136.85.238:3001/api/getAllapply"
    );
    console.log(_hotApply.data.data);
    setApply(_hotApply.data.data);
  }, []);

  return (
    <>
      <div className={style.main}>
        <div className={style.top}>
          {/* 搜索框 */}
          <Top />
        </div>

        <div className={style.body}>
          {/* 分类 */}
          <div className={style.btb}>
            {list.map((item, index) => (
              <div key={index} className={style.nav}>
                <img src={item.cover}></img>
                <div className={style.btbn}>{item.name}</div>
              </div>
            ))}
          </div>
          {/* 轮播图 */}
          <div className={style.lbt}>
            <Space direction="vertical" block>
              <Swiper
                style={{
                  "--border-radius": "8px",
                }}
                defaultIndex={3}
              >
                {items}
              </Swiper>
            </Space>
          </div>

          {/* 热门应用 */}
          <div
            style={{
              marginTop: "10px",
            }}
          >
            <div className={style.hotApply}>
              <div className={style.hotApplybt}>热门应用</div>
              <div
                style={{
                  "--font-size": "30px",
                }}
                onClick={() => {
                  history.push({ pathname: "SE" });
                }}
              >
                全部
                <RightOutline />
              </div>
            </div>
            <div className={style.hotApp}>
              {hotApp.map((item, index) => (
                <div key={index} className={style.App}>
                  <img src={item.cover}></img>
                  <div className={style.AppName}>{item.name}</div>
                  <div
                    className={style.way}
                    onClick={() => {
                      history.push({ pathname: "Detail" });
                    }}
                  >
                    {item.downWay}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 热门游戏 */}
          <div
            style={{
              marginTop: "10px",
            }}
          >
            <div className={style.hotGame}>
              <div className={style.hotGamebt}>热门游戏</div>
              <div
                style={{
                  "--font-size": "30px",
                }}
                onClick={() => {
                  history.push({ pathname: "Game" });
                }}
              >
                全部
                <RightOutline />
              </div>
            </div>
            <div className={style.hotGame}>
              {hotGame.map((item, index) => (
                <div key={index} className={style.Game}>
                  <img src={item.cover}></img>
                  <div className={style.GameName}>{item.name}</div>
                  <div
                    className={style.way}
                    onClick={() => {
                      history.push({ pathname: "Detail" });
                    }}
                  >
                    {item.downWay}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 推荐apply*/}
          <>
            {apply.map((item, index) => (
              <div key={index} className={style.applies}>
                <div className={style.apply}>
                  <img src={item.cover}></img>
                  <div className={style.applyNav}>
                    <div className={style.applyName}>{item.name}</div>
                    <div className={style.applyIntro}>{item.intro}</div>
                    <div className={style.count}>
                      {item.downloadCount}
                      <span className={style.memsize}>{item.memsize}</span>
                    </div>
                  </div>
                </div>
                <div
                  className={style.applyWay}
                  onClick={() => {
                    history.push({ pathname: "Detail" });
                  }}
                >
                  免流下载
                </div>
              </div>
            ))}
          </>
        </div>

        <Table />
      </div>
    </>
  );
};

export default Home;
